@font-face {
	font-family:teewonfont;
	src: url("../fonts/TeewonFont01.ttf");
}
$footer-popoup-height: 50px !default; // 高度
/**移动端 warning 分数 等级 */
.text-mwarning {
  color: $color-warning-mobile !important;
}

/*日期输入**/
.tw-datebox-input {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 28px;
  color: $color-text-secondary;
  text-align: center;
  background: #eee;
  border-radius: $border-radius-mobile;
}

.tw-datebox-input.xlarge{
  width: 155px;
}

.tw-datebox-line {
  display: inline-block;
  width:17px;
  height: 1px;
  margin:0 $spacing-step;
  vertical-align: middle;
  border-top: 1px solid #ccc;
}

/**popoup 弹窗**/
.tw-popoup{
  position: relative;
}

.tw-popoup.xfooter {
  padding-bottom: $footer-popoup-height;
}

.tw-popoup-title {
  position: relative;
  width:100%;
  padding: 0 60px;
  font-size: $font-size-medium;
  text-align: center;
  @include lines(bottom,$color-border-control-mobile);
}

.tw-popoup-title.xlarge{
  padding: 0 $spacing-medium;
  background: none;
  @include ellipsis;
}

.tw-popoup-title-left,
.tw-popoup-title-right {
  position: absolute;
  top: 0;
  width: 60px;
  padding: $spacing-tiny 0 $spacing-tiny $spacing-small;
  text-align: left;
}

.tw-popoup-title-left {
  left: 0;
  padding: $spacing-tiny 0 $spacing-tiny $spacing-small;
}

.tw-popoup-title-right {
  right: 0;
  padding: $spacing-tiny $spacing-small $spacing-tiny 0;
  text-align: right;
}

.tw-popoup-title-body {
  padding: $spacing-tiny 0;
  text-align: center;
  @include ellipsis;
}

.tw-popoup-body {
  max-height: 400px;
  padding: $spacing-small;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tw-popoup-body.xgray{
  background: #f5f5f5;
}

.tw-popoup-footer{
  position: absolute;
  bottom: 0;
  left:0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: $footer-popoup-height;
  font-size:$font-size-default;
  background-color: #fff;
  border-top: 1px solid $color-border-control-mobile;
}

.tw-popoup-footer-item {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 $spacing-small;
  text-align: center;
}

.tw-popoup-footer.xtiny {
  font-size: $font-size-medium;
}

.tw-popoup-footer.xtiny .tw-popoup-footer-item + .tw-popoup-footer-item {
  @include lines(left, #eee);
}

// 右侧弹窗
.tw-popoup.xright {
  width: 340px;
  height: 100%;
}

.tw-popoup.xright .tw-popoup-footer-item {
  padding: 0
}

.tw-popoup.xright .tw-popoup-body {
  max-height: 100%;
}

/**附件列表**/
.tw-attchlist-item {
  display: flex;
  align-items: center;
  padding: $spacing-tiny 0;
}

.tw-attchlist li  + li  {
  border-top: 1px solid $color-border-control-mobile;
}

.tw-attchlist-item-content {
  flex:1;
  line-height: 20px;
  @include ellipsis;
}

.tw-attchlist-item .tw-ico{
  margin-right: $spacing-tiny;
}

.tw-attchlist-item-right {
  width: 40px;
  font-size: $font-size-small;
  color: $color-text-weaking;
  text-align: right;
}

/**文本域*/
.tw-mtextarea textarea{
  margin-top: $spacing-step;
  font-size: $font-size-medium;
  @include clearfix;
}

.tw-mtextarea.xborder textarea{
  padding: $spacing-tiny;
  @include lines(top right bottom left, #eee);
}

.tw-mtextarea-num {
  float: right;
  margin-top: $spacing-small;
  color: $color-text-weaking;
}

.tw-mtextarea-info{
  font-size: $font-size-small;
  color: $color-text-warning-mobile;
}

// 图标按钮
.tw-icobtn > .tw-ico{
  margin-right: 0;
}

.tw-icobtn p {
  margin-top: -5px;
  font-size: $font-size-tiny;
  color: $color-text-main;
}

// 图标按钮首页
.tw-icobtn.xnormal p {
  margin-top: 0;
  color: $color-text-weaking;
}

// 背景区域
.tw-minfobox {
  padding:7px $spacing-step;
  font-size: $font-size-small;
  color: #647892;
  text-align: center;
  background: #eef4f7;
  border-radius: $border-radius-mobile;
}

.tw-minfobox.xdefault {
  padding:$spacing-tiny $spacing-small;
  font-size: $font-size-default;
  color: $color-text-main;
  text-align: left;
} 

// 固定区域
.tw-mfixcon {
  position: absolute;
  top:$header-height;
  left:0;
  width:100%;
  background: #fff;
}

// list列表
.tw-mconlist {

}

.tw-mconlist-item{
  position: relative;
}

.tw-mconlist-item + .tw-mconlist-item{
  @include lines(top, #eee);
}

// 学生评价列表
.tw-mconlist.xstu .tw-mconlist-item{
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.tw-mconlist.xstu .tw-mconlist-item-name {
  flex:1;
  margin-right: $spacing-medium;
}


// 有级联效果
.tw-mconlist.xstu .tw-mconlist-item.xtitle {
  padding-left: 35px;
  font-size: $font-size-medium;
  @include lines(bottom, #eee);
  &:before {
    content: "";
    position: absolute;
    top: 43%;
    left: $spacing-small;
    display: inline-block;
    margin-top: -2px;
    border: 5px solid transparent;
    border-left-color: #ccc;
    transition: all .12s linear;
    transform-origin: 50% 30%;
  }
}

.tw-mconlist .tw-mconlist-item.xtitle.xopen{
  &:before{
    border: 5px solid transparent;
    border-top-color: #ccc;
  }
}

// 暂无数据
.tw-mnodata {
  height: 180px;
  text-align: center;
}

.tw-mnodata img{
  width: 90px;
  margin-top:40px;
}

.tw-mnodata  p {
  margin-top: -15px;
  color: $color-text-weaking;
}

.tw-mnodata.xnostudy img{
  width: 140px;
  margin-top:0;
}

.tw-mnodata.xself +  .tw-mnodata.xself{
  display:none;
}

// 右边箭头
.tw-mrarrow{
  position: relative;
  padding-right: $spacing-medium;
  &:after{
    content: "";
    position: absolute;
    top:$spacing-step;
    right:$spacing-step;
    @include arrow(right, 12px,1px, $color-text-weaking);
  }
}

.tw-mrarrow.xtwoline{
  &:after{
    top: 13px;
  }
}

// 最大宽度
.tw-mmwlarge{
  display: inline-block;
  max-width: 70%;
  @include ellipsis;
}

// 首页列表
.tw-mindexitem{
  position: relative;
}

.tw-mindexitem-more{
  position: absolute;
  top: $spacing-medium;
  right: $spacing-medium;
}

// 图片尺寸
.tw-mimgcon{
  width: 30px;
  height: 30px;
}

.tw-mimgcon.xmiddle{
  width: 45px;
  height: 45px;
}

.tw-mimgcon.xsmall{
  width: 35px;
  height: 35px;
}

// 图片圆角
.tw-mimgcon.xradius{
  border-radius: 50%;
}

// 章节筛选
.tw-mchaptersel{
  position: relative;
  line-height: 30px;
  padding: $spacing-tiny $spacing-small;
}

.tw-mchaptersel-item {
  position: relative;
  min-height: 30px;
  @include ellipsis;
  &:after {
    content: " ";
    position: absolute;
    top: 10px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-bottom: 1px solid $color-text-weaking;
    border-left: 1px solid $color-text-weaking;
    transform: rotate(-134deg);

  }
}

// 绝对定位可以滚动的box
.tw-scrollbox{
  position: absolute;
  bottom: 0;
  left:0;
  width:100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

// 1px 底边线
.tw-bottomline {
  @include lines(bottom,#eee, #fff);
}

// 试题之间区分隔线
.tw-mquestline {
  height: 10px;
  margin: $spacing-small  (-$spacing-small);
  background: $color-bg-body;
}

//右上角下拉
.tw-mdropdown{
  position: relative;
  padding: $spacing-tiny 0;
  margin-top: 5px;
  border: 1px solid #d5dfef;
  border-radius: $border-radius-mobile;
  &:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 80%;
    width: 4px;
    height: 4px;
    background: #fff;
    @include arrow(up, 7px, 1px, #d5dfef);
  }
}

.tw-mdropdown.xlarge li {
  line-height: 30px;
}

.tw-mdropdown li {
  line-height: 24px;
  color:$color-text-main;
  text-align: center;
}

.tw-mdropdown li a{
  display: inline-block;
  width: 100%;
  padding: 0 $spacing-small;
  color:$color-text-main;
}

.tw-mdropdown li.xactive a{
  color: $color-main;
}

//小的灰色背标签
.tw-mgraylabel {
  display: inline-block;
  padding: 3px 0;
  margin-bottom: $spacing-step;
  color: $color-text-secondary;
  background: #f5f5f5;
  border-radius: $border-radius-mobile;
}

// 错题标签
$wrong-label-bordercolor: #ff4646 !default; // 错题原因标签边框色
$wrong-label-bgcolor: #ff4646 !default; // 错题原因选择标签背景色

.tw-mwlabel{
  position: relative;
  display: inline-block;
  padding: 2px 4px;
  margin: $spacing-step  $spacing-tiny $spacing-step 0;
  font-size: 13px;
  vertical-align: middle;
  border:  1px solid $wrong-label-bordercolor;
  border-radius: $border-radius-mobile;
}

.tw-mwlabel.xselected {
  color: #fff;
  background: $wrong-label-bgcolor;
}

// input输入框
.tw-winputbox input {
  width:200px;
  height: 36px;
  line-height: 34px;
  padding: 0 $spacing-tiny;
  margin-right:$spacing-step;
  border: 1px solid #eee;
  border-radius: $border-radius-mobile;
}

.tw-winputbox.xfull input{
  width: 100%;
}

// 带灰色背景容器
.tw-merrorbox{
  padding: $spacing-tiny;
  margin-top: $spacing-step;
  background: #f4f4f4;
  border-radius: $border-radius-mobile;
}

// 文本列表
.tw-grouplist{

}

.tw-grouplist-item{
  position: relative;
  padding: $spacing-small 0;
  font-size: $font-size-small;
  color: $color-text-weaking;
  @include lines(bottom,$color-border-control-mobile);
}

.tw-grouplist-item span {
  display: inline-block;
  vertical-align: middle;
}

.tw-grouplist-item span + span {
  margin-left: $spacing-medium;
}

.tw-grouplist-item-tit {
  font-size: $font-size-medium;
  color: $color-text-main;
}

.tw-herrorcon{
  height: 40px;
  line-height: 40px;
  margin: 0 $spacing-small $spacing-tiny;
  text-align: center;
  background: #fdeeef;
  border-radius: $border-radius-mobile;
}

.tw-mnodataheight{
  height: auto !important;
}
